<template>
    <view class="order-management-wrapper">
        <view class="header common-interval common-flex-between">
            <text
                    class="header-item"
                    :class="{'active': activeType===item.value}"
                    @tap="changeState(item)"
                    v-for="item in title"
                    :key="item.value">
                {{item.label}}
                <text v-if="activeType===item.value" class="active-line"/>
            </text>
        </view>
        <view class="common-division"/>
        <mescroll-uni top="120" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"  class="message" @init="mescrollInit">
            <view class="order-item" v-for="(item, index) in orderList" :key="index">
           <view v-if="item.orderType === 2" @tap="watchOrderDetail(item)">
               <view class="common-title right-txt">
                   <view>
                       <text class="common-title-line"/>
                       <text>租赁订单</text>
                       <text class="vip-type">{{item.vipCardMemberLogName}}</text>
                   </view>
                   <view class="order-state" :style="{'color':item.orderStatus === 50 ? '#F82432' : '#2BA8FC'}">{{orderStatus(item.orderStatus)}}</view>
               </view>
               <view class="order-book-card">
                   <order-book-card :books="item.booksHeadArr || []" :booksNum="item.booksNum" :orderId="item.orderId"/>
               </view>
           </view>
            <view v-if="item.orderType === 1"  @tap.stop="watchVipDetail(item)">
                <view class="common-title right-txt">
                    <view>
                        <text class="common-title-line"/>
                        <text>会员卡购买</text>
                    </view>
                    <view class="order-state" :style="{'color':item.orderStatus === 50 ? '#F82432' : '#2BA8FC'}">{{orderStatus(item.orderStatus)}}</view>
                </view>
                <view class="vip-card-wrapper common-flex-between">
                    <view class="vip-card">
                        <view class="name">
                            {{item.vipCardMemberLogName}}
                            <text  class="txt-line"/>
                        </view>
                    </view>
                    <view class="card-detail common-flex-column">
                        <text class="price">
                            ¥{{item.orderMoney}}
                        </text>
                        <text class="deposit">押金：¥ {{item.vipCardMemberLogDeposit}}</text>
                    </view>
                </view>
            </view>
            <view class="borrow-time" v-if="item.orderType === 2 && item.orderStatus >= 20">
                借阅时间：{{ item.orderTrueTime | formatTime}}至{{ item.orderRetunTime | formatTime}}
            </view>
            <view class="btn-wraps" v-if="item.orderStatus === 30">
                <text class="common-blue-btn btn" @tap.stop="returnBooks(item)">立即归还</text>
            </view>
            <view class="btn-wraps" v-if="item.orderStatus === 28 || item.orderStatus === 26">
                <text class="common-blue-btn btn" @tap="receiveGoods(item)">确认收货</text>
                <text class="common-white-btn btn" @tap.stop="watchLogistics(item)">查看物流</text>
            </view>
        </view>
        </mescroll-uni>
    </view>
</template>

<script>
    import orderBookCard from './order-book-card';
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import service from '@/service';
    import { dateFmt } from '@/util/utils';
    import { orderStatus } from '@/util/mock';
    export default {
        name: "index",
        components: {
            orderBookCard, MescrollUni
        },
        onLoad(params){
            let { orderStatus } = params;
            this.activeType = orderStatus;
        },
        onShow(){
            this.booksOrders();
        },
        data(){
            return{
                downOption: {
                    auto: false,
                },
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    offset: 130,
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null,
                orderStatus: orderStatus,
                page: 1,
                limit: 10,
                title: [
                    {
                        label: '待发货',
                        value: '20'
                    },
                    {
                        label: '待收货',
                        value: '26'
                    },
                    {
                        label: '待归还',
                        value: '30'
                    },
                    {
                        label: '已归还',
                        value: '40'
                    },
                    {
                        label: '全部订单',
                        value: ''
                    }
                ],
                activeType: '',
                // 0 已完成 1待完成 2待收货 3待归还
                orderList: []
            }
        },
        methods: {
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            downCallback(mescroll){
                this.orderList = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.booksOrders();
            },
            changeState(item){
                this.activeType = item.value
                this.orderList = [];
                this.page = 1;
                this.mescroll.resetUpScroll();
                // this.booksOrders();
            },
            // 确认收货
            receiveGoods(item){
                uni.showLoading({
                    title: ''
                })
                service.mineService.receiveGoods({
                    data: {
                        orderId: item.orderId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.activeType = '30';
                            this.orderList = [];
                            this.page = 1;
                            this.booksOrders();
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                })
            },
            watchOrderDetail(item){
                if(item.orderType === 2){
                    uni.navigateTo({
                        url: `./order-detail?orderId=${item.orderId}`
                    })
                }
            },
            watchVipDetail(item){
                uni.navigateTo({
                    url: `../vip/vip-card-detail?vipCardMemberLogId=${item.vipCardMemberLogId}`
                })
            },
            returnBooks(item){
                uni.navigateTo({
                    url: `./return-books?orderId=${item.orderId}`
                })
            },
            // 查看物流信息
            watchLogistics(item){
                uni.navigateTo({
                    url: `./logistics-info?orderId=${item.orderId}`
                })
            },
            booksOrders(){
                uni.showLoading({
                    title: '加载中'
                });
                service.mineService.booksOrders({
                    data: {
                        limit: this.limit,
                        page: this.page,
                        orderStatus: this.activeType
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            this.page > 1 ? this.orderList.push(...data) : this.orderList = data;
                            this.mescroll && this.mescroll.endBySize(data.length, data.num);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                })
            }
        },
        filters: {
            formatTime(value){
                return dateFmt( Number(value+'000'), 'yyyy-MM-dd')
            },
        }
    }
</script>

<style scoped lang="scss">
    .order-management-wrapper{
        background:rgba(249,249,249,1);
        .header{
            height: 100rpx;
            align-items: center;
            &-item{
                color: #999;
                position: relative;
                &.active{
                    font-size: 32rpx;
                    color: #333;
                }
            }
            .active-line{
                position: absolute;
                width:44rpx;
                height:4rpx;
                background:rgba(55,115,235,1);
                border-radius:26rpx;
                top: 50rpx;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        .order-item{
            border-radius:10rpx;
            padding: 20rpx 30rpx;
            background: #ffffff;
            margin-bottom: 20rpx;
            .order-book-card{
                padding: 20rpx 0rpx;
                border-top: 1rpx solid #E5E5E5;
            }
            .vip-type{
                font-size: 24rpx;
                margin-left: 20rpx;
                color: #999999;
            }
            .order-state{
                font-size: 24rpx;
                font-weight: 400;
            }
            .common-title-line{
                position: relative;
                top: 4rpx;
            }
            .borrow-time{
                font-size: 24rpx;
                color: #999999;
            }
            .btn-wraps{
                height: 90rpx;
                border-top:1rpx solid #E5E5E5;
                margin-top: 20rpx;
                .btn{
                    float: right;
                    margin-top: 22rpx;
                    margin-right: 21rpx;
                }
            }
        }
        .vip-card-wrapper{
            height: 180rpx;
            margin-bottom: 27rpx;
            .vip-card{
                margin-left: 17rpx;
                width:220rpx;
                height:180rpx;
                background:rgba(43,168,252,1);
                display: flex;
                align-items: center;
                .name{
                    position: relative;
                    color: #fff;
                    margin-left: 20rpx;
                    .txt-line{
                        position: absolute;
                        width:32rpx;
                        height:5rpx;
                        background:rgba(255,255,255,1);
                        border-radius: 20rpx;
                        top: 40rpx;
                        left: 0;
                    }
                }
            }
            .card-detail{
                text-align: right;
                .price{
                    color:#F02323;
                    font-size: 34rpx;
                }
                .deposit{
                    font-size: 24rpx;
                    color: #999999;
                }
            }
        }
    }
</style>